4
4
.
.
2
2
.
.
4
4
M
M
a
a
t
t
e
e
r
r
i
i
a
a
l
l
T
T
h
h
e
e
m
m
e
e
I
I
n
n
f
f
o
o
[
[
R
R
]
]
MaterialTheme is Container for which you can define different colors and text formatting.
These can then be used by its child Views (that way you can avoid hard coding these values inside children).
Content
MaterialTheme
Create Custom Theme
Create Custom Theme - In a separate File
Modify style
M
M
a
a
t
t
e
e
r
r
i
i
a
a
l
l
T
T
h
h
e
e
m
m
e
e
Simply use MaterialTheme as any other Container.
MainActivity.kt
package com.example.testcompose
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.Text
import androidx.compose.material.MaterialTheme
import androidx.compose.material.darkColors
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.setContent
val myColors = darkColors(
primary = Color.Red,
secondary = Color.Green
)
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MaterialTheme(colors = myColors) {
Text(
text = "Hello",
color = MaterialTheme.colors.primary
)
}
}
}
}
Output
C
C
r
r
e
e
a
a
t
t
e
e
C
C
u
u
s
s
t
t
o
o
m
m
T
T
h
h
e
e
m
m
e
e
Simply create Custom MaterialTheme exactly the same as in Create Custom Container.
You just put everything related to MaterialTheme in a separate Composable Function and then call it.
MainActivity.kt
package com.example.testcompose
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.Text
import androidx.compose.material.MaterialTheme
import androidx.compose.material.darkColors
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.setContent
//============================================================
// CLASS: MyTheme
//============================================================
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyTheme {
Text(
text = "Hello",
color = MaterialTheme.colors.primary
)
}
}
}
}
//============================================================
// FUNCTION: MyTheme
//============================================================
@Composable
fun MyTheme(content: @Composable() () -> Unit) {
val myColors = darkColors(
primary = Color.Red,
secondary = Color.Green
)
MaterialTheme(colors = myColors) {
content()
}
}
C
C
r
r
e
e
a
a
t
t
e
e
C
C
u
u
s
s
t
t
o
o
m
m
T
T
h
h
e
e
m
m
e
e
-
-
I
I
n
n
a
a
s
s
e
e
p
p
a
a
r
r
a
a
t
t
e
e
F
F
i
i
l
l
e
e
Create Custom MaterialTheme in a separate File (just like with any other Custom Composable Function).
And then just import it into any Kotlin File.
MainActivity.kt
package com.example.testcompose
import com.example.testcompose.ui.MyTheme
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.Text
import androidx.compose.material.MaterialTheme
import androidx.compose.material.darkColors
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.setContent
//============================================================
// CLASS: MyTheme
//============================================================
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyTheme {
Text(
text = "Hello",
color = MaterialTheme.colors.primary
)
}
}
}
}
MyThemes.kt
package com.example.testcompose.ui
import androidx.compose.material.MaterialTheme
import androidx.compose.material.darkColors
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
private val MyColors = darkColors(
primary = Color.Red,
secondary = Color.Green
)
@Composable
fun MyTheme(content: @Composable() () -> Unit) {
MaterialTheme(colors = MyColors) {
content()
}
}
M
M
o
o
d
d
i
i
f
f
y
y
s
s
t
t
y
y
l
l
e
e
[
[
R
R
]
]
You can modify style from a current MaterialTheme by using .copy().
MainActivity.kt
package com.example.testcompose
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.Text
import androidx.compose.foundation.layout.padding
import androidx.compose.material.MaterialTheme
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.setContent
import androidx.compose.ui.unit.dp
import com.example.testcompose.ui.TestComposeTheme
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
TestComposeTheme {
Text(
text = "Hello",
modifier = Modifier.padding(20.dp),
style = MaterialTheme.typography.h1.copy(color = Color.Red)
)
}
}
}
}
Output
